<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <title>Amaze UI Examples</title>

    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">


    <link rel="stylesheet" href="../assets/css/amazeui.min.css">
    <link rel="stylesheet" href="../assets/css/admin.css">
</head>
<body>
<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a
        href="http://browsehappy.com/" target="_blank">升级浏览器</a>
    以获得更好的体验！</p>
<![endif]-->

<!-- 页面内容 开发时删除 -->
<header class="am-topbar admin-header am-topbar-inverse">
    <div class="am-topbar-brand">
        <strong>Amaze UI</strong> <small>后台管理模板</small>
    </div>

    <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only" data-am-collapse="{target: '#topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span></button>

    <div class="am-collapse am-topbar-collapse" id="topbar-collapse">

        <ul class="am-nav am-nav-pills am-topbar-nav am-topbar-right admin-header-list">
            <li><a href="javascript:;"><span class="am-icon-envelope-o"></span> 收件箱 <span class="am-badge am-badge-warning">5</span></a></li>
            <li class="am-dropdown" data-am-dropdown>
                <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">
                    <span class="am-icon-users"></span> 管理员 <span class="am-icon-caret-down"></span>
                </a>
                <ul class="am-dropdown-content">
                    <li><a href="#"><span class="am-icon-user"></span> 资料</a></li>
                    <li><a href="#"><span class="am-icon-cog"></span> 设置</a></li>
                    <li><a href="#"><span class="am-icon-power-off"></span> 退出</a></li>
                </ul>
            </li>
            <li><a href="javascript:;" id="admin-fullscreen"><span class="am-icon-arrows-alt"></span> <span class="admin-fullText">开启全屏</span></a></li>
        </ul>
    </div>
</header>

<div class="am-cf admin-main">
    <!-- sidebar start -->
    <div class="admin-sidebar">
        <ul id="menu" class="am-list admin-sidebar-list">
            <li><a href="javascript:void(0);"><span class="am-icon-home"></span> 系统管理</a></li>
           <!-- <li>
                <a class="am-cf" data-am-collapse="{target: '#collapse-nav'}"> 基础信息</a>
                <ul class="am-list am-collapse admin-sidebar-sub am-in" id="collapse-nav">
                    <li><a href="javascript:void(0);">用户管理</a></li>
                    <li><a href="javascript:void(0);">角色管理</a></li>
                    <li><a href="javascript:void(0);">商品管理</a></li>
                </ul>
            </li>
            <li>
                <a class="am-cf" data-am-collapse="{target: '#collapse-nav-order'}"> 订单管理</a>
                <ul class="am-list am-collapse admin-sidebar-sub am-in" id="collapse-nav-order">
                    <li><a href="javascript:void(0);">订单评价</a></li>
                    <li><a href="javascript:void(0);">订单撤消</a></li>
                </ul>
            </li>-->
        </ul>

    </div>
    <!-- sidebar end -->
    <div class="admin-content" style="padding:5px 2px;">

        <div class="am-tabs" data-am-tabs="{noSwipe: 1}">
            <ul class="am-tabs-nav am-nav am-nav-tabs">
                <li class="am-active"><a href="#tab1">基本信息</a></li>
                <li><a href="#tab2">详细描述</a></li>
                <li><a href="#tab3">SEO 选项</a></li>
            </ul>

            <div class="am-tabs-bd">
                <div class="am-tab-panel am-fade am-in am-active" id="tab1">
                    <div class="am-g am-margin-top">
                        <div class="am-u-sm-2 am-text-right">所属类别</div>
                        <div class="am-u-sm-10">
                            <select>
                                <option value="option1">选项一...</option>
                                <option value="option2">选项二.....</option>
                                <option value="option3">选项三........</option>
                            </select>
                        </div>
                    </div>

                    <div class="am-g am-margin-top">
                        <div class="am-u-sm-2 am-text-right">显示状态</div>
                        <div class="am-u-sm-10">
                            <div class="am-btn-group" data-am-button>
                                <label class="am-btn am-btn-default am-btn-xs">
                                    <input type="radio" name="options" id="option1"> 正常
                                </label>
                                <label class="am-btn am-btn-default am-btn-xs">
                                    <input type="radio" name="options" id="option2"> 待审核
                                </label>
                                <label class="am-btn am-btn-default am-btn-xs">
                                    <input type="radio" name="options" id="option3"> 不显示
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="am-g am-margin-top">
                        <div class="am-u-sm-2 am-text-right">推荐类型</div>
                        <div class="am-u-sm-10">
                            <div class="am-btn-group" data-am-button>
                                <label class="am-btn am-btn-default am-btn-xs">
                                    <input type="checkbox"> 允许评论
                                </label>
                                <label class="am-btn am-btn-default am-btn-xs">
                                    <input type="checkbox"> 置顶
                                </label>
                                <label class="am-btn am-btn-default am-btn-xs">
                                    <input type="checkbox"> 推荐
                                </label>
                                <label class="am-btn am-btn-default am-btn-xs">
                                    <input type="checkbox"> 热门
                                </label>
                                <label class="am-btn am-btn-default am-btn-xs">
                                    <input type="checkbox"> 轮播图
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="am-g am-margin-top">
                        <div class="am-u-sm-2 am-text-right">
                            发布时间
                        </div>
                        <div class="am-u-sm-10">
                            <form action="" class="am-form am-form-inline">
                                <div class="am-form-group am-form-icon">
                                    <i class="am-icon-calendar"></i>
                                    <input type="text" class="am-form-field am-input-sm" placeholder="时间">
                                </div>
                            </form>
                        </div>
                    </div>

                </div>

                <div class="am-tab-panel am-fade" id="tab2">
                    <form class="am-form">
                        <div class="am-g am-margin-top">
                            <div class="am-u-sm-2 am-text-right">
                                文章标题
                            </div>
                            <div class="am-u-sm-4">
                                <input type="text" class="am-input-sm">
                            </div>
                            <div class="am-u-sm-6">*必填，不可重复</div>
                        </div>

                        <div class="am-g am-margin-top">
                            <div class="am-u-sm-2 am-text-right">
                                文章作者
                            </div>
                            <div class="am-u-sm-4 col-end">
                                <input type="text" class="am-input-sm">
                            </div>
                        </div>

                        <div class="am-g am-margin-top">
                            <div class="am-u-sm-2 am-text-right">
                                信息来源
                            </div>
                            <div class="am-u-sm-4">
                                <input type="text" class="am-input-sm">
                            </div>
                            <div class="am-u-sm-6">选填</div>
                        </div>

                        <div class="am-g am-margin-top">
                            <div class="am-u-sm-2 am-text-right">
                                内容摘要
                            </div>
                            <div class="am-u-sm-4">
                                <input type="text" class="am-input-sm">
                            </div>
                            <div class="am-u-sm-6">不填写则自动截取内容前255字符</div>
                        </div>

                        <div class="am-g am-margin-top-sm">
                            <div class="am-u-sm-2 am-text-right">
                                内容描述
                            </div>
                            <div class="am-u-sm-10">
                                <textarea rows="10" placeholder="请使用富文本编辑插件"></textarea>
                            </div>
                        </div>

                    </form>
                </div>

                <div class="am-tab-panel am-fade" id="tab3">
                    <form class="am-form">
                        <div class="am-g am-margin-top-sm">
                            <div class="am-u-sm-2 am-text-right">
                                SEO 标题
                            </div>
                            <div class="am-u-sm-4 am-u-end">
                                <input type="text" class="am-input-sm">
                            </div>
                        </div>

                        <div class="am-g am-margin-top-sm">
                            <div class="am-u-sm-2 am-text-right">
                                SEO 关键字
                            </div>
                            <div class="am-u-sm-4 am-u-end">
                                <input type="text" class="am-input-sm">
                            </div>
                        </div>

                        <div class="am-g am-margin-top-sm">
                            <div class="am-u-sm-2 am-text-right">
                                SEO 描述
                            </div>
                            <div class="am-u-sm-4 am-u-end">
                                <textarea rows="4"></textarea>
                            </div>
                        </div>
                    </form>
                </div>

            </div>
        </div>

    </div>
</div>

<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/amazeui.min.js"></script>
<script src="common.js"></script>

<script>
    $(function(){
        initMenu();
    })
    function initMenu(){
        doAjax("data.js",null, function(data){
            var menus = data.menu;
            for(var i = 0; i < menus.length; i++){
                if(menus[i].parent == null || menus[i].parent.length == 0){
                    $("#menu").append('<li><a class="am-cf" data-am-collapse="{target: \'#sub_'+menus[i].id+'\'}"> '+menus[i].name+'</a></li>');
                    $("#menu").append('<ul class="am-list am-collapse admin-sidebar-sub am-in" id="sub_'+menus[i].id+'"></ul>');
                }else{
                    $("#sub_"+menus[i].parent).append('<li><a href="javascript:void(0);" url="'+menus[i].url+'" onclick="openTab(this)">'+menus[i].name+'</a></li>');
                }
            }
        });
    }
    function openTab(item){
        alert("go to"+$(item).attr("url"));
    }
    </script>
</body>
</html>
